<template>
	<view class="container_act">

		<view @click="handleDetail" class="activity_card">
			<view class="image_container">
				<image
					:src="item.images"
					mode=""></image>
			</view>
			<view class="content_activity">
				<view class="title">
					{{item.title}}
				</view>
				<view class="category">
					<view class="pinpai">
						品牌
					</view>
					<view class="content">
						{{item.brand}}
					</view>
				</view>
				<view class="time">
					活动时间：{{(item.startTime+'-'+item.endTime)||'不限'}}
				</view>
				<view class="tips_content">
					<view class="contents">
						<view class="images_tip">
							<image src="/static/images/count.png" mode=""></image>
						</view>
						<view class="count">
							{{item.numbers}}/{{item.numberControl ||'不限'}}（人）
						</view>
					</view>
					<view class="">
						<u-button :customStyle="{...getStyle(item.isJoined)}"
							:type="item.isJoined?'primary':'success'">{{item.isJoined?'取消报名':'立即报名'}}</u-button>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		props: ['item'],
		data() {
			return {
				myBtnStyle: {
					padding: '10rpx 40rpx',
					backgroundColor: '#f76b7f',
					border: 'none',
					borderRadius: '20rpx'
				},
				cancelBtnStyle: {
					padding: '10rpx 40rpx',
					backgroundColor: '#2cf75c',
					border: 'none',
					borderRadius: '20rpx'
				}
			}
		},
		methods: {
			handleDetail() {
				uni.navigateTo({
					url: `/pages/forum/activity/detail?id=${this.item.id}`
				})
			},
			getStyle(flag) {
				return flag === true ? this.myBtnStyle : this.cancelBtnStyle
			}
		}
	}
</script>

<style scoped lang="scss">
	.container_act {
		.activity_card {
			background-color: #fff;
			width: 96%;
			margin: 0 auto;
			border-radius: 20rpx;

			.image_container {
				width: 100%;
				margin: 0 auto;
				margin-top: -20rpx;

				image {
					border-radius: 20rpx;
					width: 100%;
					height: 300rpx;
				}
			}

			.content_activity {
				padding: 20rpx 20rpx;

				.title {
					font-size: 1.3rem;
					font-weight: 600;
				}

				.category {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.pinpai {
						color: #fff;
						background-color: #f86754;
						border-radius: 10rpx;
						font-size: 0.8rem;
						padding: 10rpx 20rpx;
					}

					.content {
						font-size: 0.8rem;
						padding: 10rpx 20rpx;
						color: gray;
						background: linear-gradient(to right, #feedeb, #ffffff);
					}
				}

				.time {
					padding: 0 10rpx;
					color: gray;
					font-size: 0.8rem;
					letter-spacing: 0.10rem;

				}

				.tips_content {
					margin: 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.contents {
						display: flex;
						align-items: center;

						.images_tip {
							image {
								margin-right: 20rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.count {}
					}

				}
			}

		}
	}
</style>